<template>
  <view class="credit_container">

    <view class="top-content padd30">
      <t-search v-model="search" placText="商品搜索" @input="input"></t-search>
      <view class="top">
        <view class="flex align-center">
          <image class="img_1" src="https://www.worldintek.com:39011/yaolexue-service/icon_xuefen_2.png"
            mode="widthFix" />
          <view class="num">
            {{ score }}
          </view>
        </view>
        <view class="convert" @click="myOrder">
          我的订单
        </view>
      </view>

      <image class="img_2" src="https://www.worldintek.com:39011/yaolexue-service/icon_shopping_bg.png" mode="" />
    </view>


    <t-tabs lineHeight="4" backgroundColor="#FAFAFA" fontWeight="700" color="#333333" :list="tabsList"
      :activeIndex="tabsIndex" @change="tabsChange">



    </t-tabs>
    <view class="scroll-content " :style="'height:'+ Height+'px;'">

      <u-list  @scrolltolower="scrolltolower"   :height="Height+'px'">
        <u-list-item class="u-list-item" v-for="(item, index) in goodsListData" :key="index">
          <view class="shopping" @click="goodsDetail(item)">
            <image class="big-img"
              :src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDto.compressLink}`" mode="">
            </image>
            <view class="shopping-name">
              {{item.productName}}
            </view>
            <view class="footer">
              <image class="smart-img" src="https://www.worldintek.com:39011/yaolexue-service/icon_xuefen.png" mode="">
              </image>
              <view class="shoppong-price">
                {{item.price}}
              </view>
            </view>

          </view>
        </u-list-item>
  <u-empty
         
      v-if="showEmpty"
              mode="list"
      >
      </u-empty>
      </u-list>
    
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        showEmpty:false,
        search: '',
        timer: null,
        scrollTop: 0,
        queryInfo: {
          limit: 6,
          page: 1,
        },
        goodsListData: [],
        tabsList: [],
        tabsIndex: 0,
        total: 0,
        isloading: false,
        Height: 0,
        status: 'loading',
        score: 0
      };
    },
  async  onLoad() {
      const sys = uni.getSystemInfoSync()
      this.Height = sys.windowHeight - uni.upx2px(580) - 44
     await this.findProductCategory()
     await  this.getScore()
    },
    onShow() {
     this.getScore()
     console.log('onShow');
    },
    computed: {
      categoryId() {
        if (!this.tabsList.length) return
        return this.tabsList[this.tabsIndex].id || {}
      }
    },
    methods: {
      async getScore() {
        const res = await this.$http.get('/yaolexue-service-portal/sysPortalUser/portalUserInfo')
        console.log('getScore', res);
        if(res.code == 200) {
          this.score = res.data.score
        } else {
          uni.showToast({
            title: '获取失败',
            icon: 'error'
          })
        }
      },
     async init() {
       await this.getGoodsList(this.categoryId)
      },
      async findProductCategory() {
        const res = await this.$http.get('/yaolexue-service-portal/product/findProductCategory', {
          isNeedLoading: false
        })


        if (res.code !== 200) {
          uni.showToast({
            title: '获取商品分类失败',
            icon: 'error'
          })
        } else {
          this.tabsList = res.data;
          this.getGoodsList();
          console.log('tabsList', this.tabsList);
        }
      },
      async getGoodsList(categoryId) {
        console.log('categoryId', categoryId);
        this.isloading = true
        this.status = 'loading';
        
        const query = {
          limit: this.queryInfo.limit,
          page: this.queryInfo.page,
          categoryId: this.categoryId || 1,
          productName: this.search.trim()
        };
        try {
            const res = await this.$http.get('/yaolexue-service-portal/product/pageProduct', query, {
              showLoading: true
            });
        
            console.log('getGoodsList', res.data);
            
            this.isloading = false;
        
            if (res.data && res.data.items) {
              // 检查 res.data 和 res.data.items 是否不为 null
              this.goodsListData = [...this.goodsListData, ...res.data.items];
              this.total = res.data.total;
              if(this.total ===0)this.showEmpty=true
            } else {
              console.error('无效的响应格式:', res);
            }
          } catch (error) {
            console.error('获取商品数据时出错:', error);
            this.isloading = false;
          }

       
      },
      scrolltolower() {

        if (this.isloading) return;
        this.status = 'loading';
        if (this.queryInfo.page * this.queryInfo.limit >= this.total) return this.status = 'nomore'
        this.queryInfo.page += 1;
        this.getGoodsList()
      },

      clear(e) {
        console.log(e);
      },
      tabsChange(index) {
        this.tabsIndex = index
        this.queryInfo.page = 1;
        this.goodsListData = [];
        this.showEmpty=false
        this.getGoodsList();
      },
      input(e) {
        console.log(e);
        this.queryInfo.page = 1;
        this.goodsListData = [];
        uni.$u.debounce(()=>{  this.init()},500)
      
          this.search = e
        
      },
      goodsDetail(item) {
        getApp().globalData.goodsInfo = item

        uni.navigateTo({
          url: '/subPages/goodsDetail/goodsDetail?id=' + item.id
        })
      },
      myOrder() {
        uni.navigateTo({
          url: '/pages/myOrder/myOrder'
        })
      },

    },
  }
</script>

<style lang="scss">
  .u-empty{
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .u-list {
    height: 100% !important;

    .list-item-wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
    }


    .u-loadmore {
      margin-top: 200px;
    }
  }

  .credit_container {
    overflow: hidden;
    background: #FAFAFA;

    .top-content {
      width: 750rpx;
      height: 380rpx;
      background: #FA312A;
      border-radius: 0px 0px 500px 500px / 0px 0px 34px 34px;
      padding-top: 56rpx;
      z-index: 999;

      .top {
        display: inline-flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        margin-top: 53rpx;

        .img_1 {
          width: 47rpx;
          height: 47rpx;
          margin-left: 22rpx;
        }

        .num {

          height: 110rpx;
          font-size: 80rpx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #FFFFFF;
          margin-left: 11rpx;
        }
      }

      .convert {
        width: 136px;
        height: 36px;
        line-height: 36px;
        background: rgba(255, 255, 255, .3);

        border-radius: 30px;
        text-align: center;
        color: #fff;

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        margin-right: 58rpx;
      }

      .img_2 {
        width: 689rpx;
        height: 213rpx;
        background: #8F98A0;
        border-radius: 10rpx;
        overflow: hidden;
        margin-top: 30rpx;
        z-index: 999;
      }
    }








    ::v-deep .tabs {
      justify-content: space-between;
      // padding-right: 31rpx;
      overflow: hidden;
      margin-top: 200rpx;

    }

    .scroll-content {
      margin: 0 32rpx;
      overflow: scroll;


      .shopping {
        width: 307rpx;
        height: 384rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        margin-top: 52rpx;



        .big-img {
          width: 221rpx;
          height: 207rpx;
          margin: 31rpx 43rpx 33rpx 43rpx;
        }

        .shopping-name {
          width: fit-content;
          height: 29rpx;
          font-size: 30rpx;
          font-family: Source Han Sans CN;
          color: #333333;
          margin-left: 14rpx;
        }

        .footer {
          width: 100px;
          height: 33rpx;
          display: flex;
          margin-left: 14rpx;
          margin-top: 31rpx;
          align-items: center;

          .smart-img {
            width: 33rpx;
            height: 33rpx;
          }

          .shoppong-price {
            font-size: 28rpx;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #FA312A;
            margin-left: 16rpx;
          }
        }


      }
    }


  }
</style>